<template>
    <van-sticky :offset-top="0">
        <div>
            <van-nav-bar title="积分商城" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
    </van-sticky>
    <van-card v-for="item in pointmall" currency="" :num="item.amount" :thumb="item.src" :title="item.name"
        @click="handleexchange(item)">
        <template #tags>
            <span class="date">使用日期：{{ item.date }}</span>
        </template>
        <template #footer>
            <van-button size="mini" class="btn1" @click="handleexchange">立即兑换</van-button>
        </template>
        <template #price-top>
            <p class="price">需要积分：{{ item.integral }}</p>
            <p>使用须知：{{ item.useinfor }}</p>
        </template>
    </van-card>






</template>

<script setup lang="ts">
import { pointmallGet } from '../../api/home'
import { ref } from 'vue'
import { LocationQueryRaw, useRouter } from 'vue-router';

const router = useRouter()

interface Pointmall {
    amount: number,
    date: string,
    name: string,
    objctID: string,
    src: string,
    integral: number,
    useinfor: string
}
interface List {
    list: Array<Pointmall>
}
defineProps<List>()

// 拿取积分商城数据
let pointmall = ref<Array<Pointmall>>([])
let res = await pointmallGet();
pointmall.value = res.data.results


console.log(pointmall.value);


//详情页渲染，路由传参
const onClickLeft = () => history.back();
const handleexchange = (item: Pointmall) => {
    router.push({
        path: '/detail',
        query: {
            ...item
        }
    })

}



</script>




<style lang="scss" scoped>
.btn1 {
    background-color: orange;
    border-radius: 15px;
    color: #ffffff;
}

.date {
    margin-top: 2rem;
}

.price {
    font-size: 3rem;
}
</style>